import { Form, Button, message } from 'antd';
import { useState } from 'react'
import './Security_monitoring.scss'
import Biao from './Biao';
import Biao2 from './Biao2';
import Biao3 from './Biao3';
import Add from './Add';



const Security_monitoring = () => {
  //设置from
  const [form] = Form.useForm();


  //批量删除
  const del = () => {
    console.log(111111);
    message.success('批量删除成功！');
  }
  //新增
  const [addyemian, setaddyemian] = useState(false);
  const add = () => {
    setaddyemian(true)
  }
  const [state, setState] = useState(1)
  //判断点击的是哪一个title

  let biao;
  if (state === 1) {
    biao = <Biao></Biao>
  } else if (state === 2) {
    biao = <Biao2></Biao2>
  } else if (state === 3) {
    biao = <Biao3></Biao3>
  }
  const dianji = (v) => {

    console.log(v)
    setState(v)

  }

  if (addyemian) {
    return (
      <div>
        <Add setaddyemian={setaddyemian}></Add>
      </div>
    );
  } else {
    return (
      <div>
        <div className='roleContent'>
          <Form form={form} name="horizontal_login" layout="inline" className='title'>
            <Form.Item
              name="username">
              <div className='kuai'>
                <span></span>
                <span>安防监控管理</span>
              </div>
            </Form.Item>

            <Form.Item className='btn' style={{ display: state === 1 ? 'block' : 'none' }}>
              <div>
                <Button className='cha'
                  type="primary"
                  onClick={add}>新增</Button>
                <Button className='resize' onClick={del} type="primary">批量删除</Button>
              </div>
            </Form.Item>


          </Form>
          <div className='biao'>
            <div className='theme'>
              <span onClick={() => { dianji(1) }} style={{ color: state === 1 ? '#009688' : 'black' }}>设备列表</span>
              <span onClick={() => { dianji(2) }} style={{ color: state === 2 ? '#009688' : 'black' }}>告警记录</span>
              <span onClick={() => { dianji(3) }} style={{ color: state === 3 ? '#009688' : 'black' }}>运维记录</span>
            </div>
            <hr />
            {biao}
          </div>
        </div>

      </div>
    );
  }

};

export default Security_monitoring;
